{% extends 'base.html' %}

{% load staticfiles %}

{% load comment_tags %}
{% load likes_tags %}

{% block title %}{{ blog.title }}{% endblock %}

{% block style %}
<link rel="stylesheet" href="{% static 'css/detail.css' %}">
{% endblock %}

{% block content %}
<div class="up-top"><a href="#"><span class="glyphicon glyphicon-arrow-up">返回顶部</span></a></div>
<div class="container">
    <div class="row">
        <div class="col-sm-10 col-md-10 col-md-offset-1 col-sm-offset-1">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ blog.title }}</h3>
                </div>
                <div class="panel-body">
                    <ul class="blog-info-description">
                        <li>作者: {{ blog.author }}</li>
                        <li>分类: <a href="{% url 'type_list' blog.blog_type.pk %}">
                                {{ blog.blog_type }}
                            </a></li>
                        <li>发布日期: {{ blog.c_time|date:'Y-m-d' }}</li>
                        <li>阅读量: ({{ blog.get_read_num }})</li>
                        <li>评论数: <span id="comment_count">({% get_comment_count blog %})</span></li>
                    </ul>
                    <div class="blog-detail">
                        {{ blog.content|safe }}
                    </div>
                    <div class="like" onclick="likeChange(this, '{% get_content_type blog %}', '{{ blog.pk }}')"><span
                              class="glyphicon glyphicon-thumbs-up {% get_like_status blog %}"></span>
                        (<span class="like-num">{% get_like_count blog %}</span>)喜欢
                    </div>
                    <div class="blog-more">
                        <p>上一篇:
                            {% if pre_blog %}
                            <a href="{% url 'blog_detail' pre_blog.pk  %}">
                                {{ pre_blog.title }}
                            </a>
                            {% else %}
                            <span>没有了</span>
                            {% endif %}
                        </p>
                        <p>下一篇:
                            {% if next_blog %}
                            <a href="{% url 'blog_detail' next_blog.pk  %}">
                                {{ next_blog.title }}
                            </a>
                            {% else %}
                            <span>没有了</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
            <div class="comment-area">
                <h4 class="comment-area-title">提交评论</h4>
                {% if user.is_authenticated %}
                <form id="comment-form" action="{% url 'update_comment' %}" method="POST">
                    {% csrf_token %}
                    <label for="comment-text">
                        {{ user.get_nickname }}, 欢迎评论!
                    </label>
                    <div id="reply-content-container" style="display: none;">
                        <p id="reply-title">回复: </p>
                        <div id="reply-content">
                        </div>
                    </div>
                    {% get_comment_form blog as comment_form %}
                    {% for field in comment_form %}
                    {{ field }}
                    {% endfor %}
                    <input type="submit" value="评论" class="btn btn-primary pull-right">
                </form>
                {% else %}
                <p><label>尚未登录, 登录之后可评论</label></p>
                <a href="{% url 'login' %}?from={{ request.get_full_path }}">
                    <button type="button" class="btn btn-primary">
                        登录
                    </button>
                </a><span>or</span>
                <a href="{% url 'register' %}">
                    <button type="button" class="btn btn-info">
                        注册
                    </button>
                </a>
                {% endif %}
            </div>
            <span id="comment-error" class="text-danger"></span>
            <div class="comment-area">
                <h4 class="comment-area-title">评论列表</h4>
                <div id="comment-list">
                    {% get_comment_list blog as comments %}
                    {% for comment in comments %}
                    <div id="root-{{ comment.pk }}" class="comment">
                        <span>{{ comment.user.username }}</span>
                        <span>
                            ({{ comment.comment_time|date:'Y-m-d H:i:s' }}):
                        </span>
                        <div id="comment-{{ comment.pk }}">
                            {{ comment.text|safe }}
                        </div>
                        <div class="like" onclick="likeChange(this,
                        '{% get_content_type comment %}',
                             '{{ comment.pk }}')">
                            <span class="glyphicon glyphicon-thumbs-up {% get_like_status comment %}"></span>
                            (<span class="like-num">{% get_like_count comment %}</span>)
                        </div>
                        <a href="javascript:reply({{ comment.pk }})">回复</a>
                    </div>
                    {% for reply in comment.root_comment.all %}
                    <div class="reply">
                        <div class="reply-header">
                            <span class="glyphicon glyphicon-hand-right"></span>
                            <span>{{ reply.user.get_nickname }}</span>
                            <span>
                                ({{ reply.comment_time|date:'Y-m-d H:i:s' }})
                            </span>
                            <span>回复: {{ reply.reply_to.get_nickname }}</span>
                        </div>
                        <div id="comment-{{ reply.pk }}">
                            {{ reply.text|safe }}
                        </div>
                        <div class="like" onclick="likeChange(this, '{% get_content_type reply %}','{{ reply.pk }}')">
                            <span class="glyphicon glyphicon-thumbs-up {% get_like_status reply %}"></span>
                            (<span class="like-num">{% get_like_count reply %}</span>)
                        </div>
                        <a href="javascript:reply({{ reply.pk }})">回复</a>
                    </div>
                    {% endfor %}
                    {% empty %}
                    <span id="no-comment">暂无评论</span>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
{% endblock %}
{% block script_extend %}
<script>
    function reply(reply_comment_id) {
        $("#comment-error").text('');
        $("#reply_comment_id").val(reply_comment_id);
        var html = $("#comment-" + reply_comment_id).html();
        $("#reply-content").html(html);
        $("#reply-content-container").show();
        $('html').animate({
            scrollTop: $("#comment-form").offset().top - 60
        }, 300, function () {
            CKEDITOR.instances["id_text"].focus();
        });
    };

    $("#comment-form").submit(function () {
        $("#comment-error").text('');
        // 提交前判断评论是否为空
        if (CKEDITOR.instances["id_text"].document.getBody().getText().trim() == '') {
            $("#comment-error").text('评论内容不能为空');
            return false;
        };
        // 更新数据到 textarea
        CKEDITOR.instances["id_text"].updateElement();

        // 异步提交
        $.ajax({
            url: "{% url 'update_comment' %}",
            type: 'POST',
            data: $(this).serialize(),
            cache: false,
            success: function (data) {
                // 提交成功就插入数据
                if (data['status'] == 'success') {
                    if ($("#reply_comment_id").val() == '0') {
                        // 插入评论
                        var comment_html = `<div id="root-${data['pk']}" class="comment"><span>${data['username']}</span><span>(${data['comment_time']}):</span><div id="comment-${data['pk']}">${data['text']}</div><div class="like" onclick="likeChange(this,'${data['content_type']}','${data['pk']}')"><span class="glyphicon glyphicon-thumbs-up"></span>(<span class="like-num">0</span>)</div><a href="javascript:reply(${data['pk']})">回复</a></div>`
                        $("#comment-list").prepend(comment_html);

                    } else {
                        // 插入回复
                        var reply_html = `<div class="reply"><div class="reply-header"><span class="glyphicon glyphicon-hand-right"></span><span>${data['username']}<span><span>(${data['comment_time']})</span><span>回复: ${data['reply_to']}</span></div><div id="comment-${data['pk']}">${data['text']}</div> <div class="like" onclick="likeChange(this, '${data['content_type']}','${data['pk']}')"><span class="glyphicon glyphicon-thumbs-up"></span>(<span class="like-num">0</span>)</div><a href="javascript:reply(${data['pk']})">回复</a></div>`
                        $("#root-" + data['root_pk']).append(reply_html);
                    };
                    $("#comment-error").text('评论成功');
                    var comment_count = parseInt($("#comment_count").text()) + 1;
                    $("#comment_count").text(comment_count.toString());
                    // 清空编辑框中的内容
                    CKEDITOR.instances["id_text"].setData('');
                    $("#reply-content-container").hide();
                    $("#reply_comment_id").val('0')
                    $("#no-comment").remove();
                } else {
                    // 显示错误信息
                    $("#comment-error").text(data['message']);
                }
            },
            error: function (xhr) {
            },
        });

        return false;
    });
    function likeChange(obj, content_type, object_id) {
        var is_like = obj.getElementsByClassName('active').length == 0
        $.ajax({
            url: "{% url 'likechange' %}",
            type: 'GET',
            data: {
                content_type: content_type,
                object_id: object_id,
                is_like: is_like,
            },
            cache: false,
            success: function (data) {
                if (data['status'] == 'success') {
                    // 更新点赞状态
                    var elem = $(obj.getElementsByClassName('glyphicon'))
                    if (is_like) {
                        elem.addClass('active')
                    } else {
                        elem.removeClass('active')
                    }
                    // 更新点赞数量
                    var liked_num = $(obj.getElementsByClassName('like-num'))
                    liked_num.text(data['liked_num'])
                } else {
                    if (data['code'] == 400) {
                        $('#login_modal').modal('show')
                        $("#login_modal_tip").text('')
                        $("#id_password").val('')
                        var t = $("#id_username").val()
                        $("#id_username").focus().val(t)
                    }
                    else { alert(data['message']) }
                }
            },
            error: function (xhr) {

            },
        });
    };

</script>
{% endblock %}
